import 'package:fl_chart/fl_chart.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../../common/app_colors.dart';
import '../../../../common/app_text_style.dart';
import '../../widget/indicator.dart';
import '../../../../widget/text/text_widget.dart';
import 'pie_chart1_logic.dart';

class PieChart1Page extends StatefulWidget {
  const PieChart1Page({Key? key}) : super(key: key);

  @override
  State<PieChart1Page> createState()=> PieChart1PageState();
}

class PieChart1PageState extends State<PieChart1Page>{

  final logic = Get.put(PieChart1Logic());
  final state = Get.find<PieChart1Logic>().state;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.only(
        left: 32,
        right: 32,
        top: 32,
        bottom: 32,
      ),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          TextWidget(
            "Line Chart Sample1", TS_FF50E4FF_18_W4,
          ),
          const SizedBox(height: 20),
          Container(
            decoration: const BoxDecoration(
              color: AppColors.colorFF1B2339,
              borderRadius: BorderRadius.all(Radius.circular(8)),
            ),
            child: AspectRatio(
              aspectRatio: 1.3,
              child: Column(
                children: <Widget>[
                  const SizedBox(
                    height: 28,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      Indicator(
                        color: AppColors.colorFF2196F3,
                        text: 'One',
                        isSquare: false,
                        size: state.touchedIndex == 0 ? 18 : 16,
                        textColor: state.touchedIndex == 0
                            ? AppColors.mainTextColor1
                            : AppColors.mainTextColor3,
                      ),
                      Indicator(
                        color: AppColors.contentColorYellow,
                        text: 'Two',
                        isSquare: false,
                        size: state.touchedIndex == 1 ? 18 : 16,
                        textColor: state.touchedIndex == 1
                            ? AppColors.mainTextColor1
                            : AppColors.mainTextColor3,
                      ),
                      Indicator(
                        color: AppColors.contentColorPink,
                        text: 'Three',
                        isSquare: false,
                        size: state.touchedIndex == 2 ? 18 : 16,
                        textColor: state.touchedIndex == 2
                            ? AppColors.mainTextColor1
                            : AppColors.mainTextColor3,
                      ),
                      Indicator(
                        color: AppColors.contentColorGreen,
                        text: 'Four',
                        isSquare: false,
                        size: state.touchedIndex == 3 ? 18 : 16,
                        textColor: state.touchedIndex == 3
                            ? AppColors.mainTextColor1
                            : AppColors.mainTextColor3,
                      ),
                    ],
                  ),
                  const SizedBox(
                    height: 18,
                  ),
                  Expanded(
                    child: AspectRatio(
                      aspectRatio: 1,
                      child: PieChart(
                        PieChartData(
                          pieTouchData: PieTouchData(
                            touchCallback: (FlTouchEvent event, pieTouchResponse) {
                              setState(() {
                                if (!event.isInterestedForInteractions ||
                                    pieTouchResponse == null ||
                                    pieTouchResponse.touchedSection == null) {
                                  state.touchedIndex = -1;
                                  return;
                                }
                                state.touchedIndex = pieTouchResponse
                                    .touchedSection!.touchedSectionIndex;
                              });
                            },
                          ),
                          startDegreeOffset: 180,
                          borderData: FlBorderData(
                            show: false,
                          ),
                          sectionsSpace: 1,
                          centerSpaceRadius: 0,
                          sections: showingSections(),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }

  List<PieChartSectionData> showingSections() {
    return List.generate(
      4,
          (i) {
        final isTouched = i == state.touchedIndex;
        const color0 = AppColors.colorFF2196F3;
        const color1 = AppColors.contentColorYellow;
        const color2 = AppColors.contentColorPink;
        const color3 = AppColors.contentColorGreen;

        switch (i) {
          case 0:
            return PieChartSectionData(
              color: color0,
              value: 25,
              title: '',
              radius: 80,
              titlePositionPercentageOffset: 0.55,
              borderSide: isTouched
                  ? const BorderSide(
                  color: AppColors.colorFFFFFFFF, width: 6)
                  : BorderSide(
                  color: AppColors.colorFFFFFFFF.withOpacity(0)),
            );
          case 1:
            return PieChartSectionData(
              color: color1,
              value: 25,
              title: '',
              radius: 65,
              titlePositionPercentageOffset: 0.55,
              borderSide: isTouched
                  ? const BorderSide(
                  color: AppColors.colorFFFFFFFF, width: 6)
                  : BorderSide(
                  color: AppColors.colorFFFFFFFF.withOpacity(0)),
            );
          case 2:
            return PieChartSectionData(
              color: color2,
              value: 25,
              title: '',
              radius: 60,
              titlePositionPercentageOffset: 0.6,
              borderSide: isTouched
                  ? const BorderSide(
                  color: AppColors.colorFFFFFFFF, width: 6)
                  : BorderSide(
                  color: AppColors.colorFFFFFFFF.withOpacity(0)),
            );
          case 3:
            return PieChartSectionData(
              color: color3,
              value: 25,
              title: '',
              radius: 70,
              titlePositionPercentageOffset: 0.55,
              borderSide: isTouched
                  ? const BorderSide(
                  color: AppColors.colorFFFFFFFF, width: 6)
                  : BorderSide(
                  color: AppColors.colorFFFFFFFF.withOpacity(0)),
            );
          default:
            throw Error();
        }
      },
    );
  }
}
